<!-- 模板弹窗 -->
<template>
  <div class="com-search-wp">
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" :size="size">
        <slot :advanced="advanced"></slot>
        <el-form-item>
          <div class="handle-box">
            <el-button type="primary" icon="el-icon-search" @click="$emit('search')">查询</el-button>
            <el-button v-if="showReset" icon="el-icon-refresh-right" @click="$refs.form.resetFields()">重置</el-button>
            <el-button v-if="showAdvanced" type="text" @click="advanced=!advanced">
              {{advanced?'收起':'展开'}}<i :class="[advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'com-search',
  data () {
    return {
      advanced: false, // 是否展开
    }
  },
  props: {
    // 表单数据
    form: {
      default () {
        return {}
      }
    },
    // 验证规则
    rules: {
      default () {
        return {}
      }
    },
    size: {
      default: 'small'
    },
    // 是否显示折叠操作
    showAdvanced: {
      default: true
    },
    // 是否显示重置按钮
    showReset: {
      default: true
    }
  },
}
</script>
<style lang="scss" scoped>
.com-search-wp {
  .content {
    position: relative;
  }
}
</style>